<template>
  <vue-scroll :ops="ops" ref="vs">
    <div
      class="home"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
    >
      <div class="box">
        <article-item
          class="articleitem"
          v-for="(item, index) in data"
          :key="index"
          :article="item"
          @click.native="handlerarticle(item._id)"
        ></article-item>
        <div class="page">
          <!-- <el-button type="primary" icon="el-icon-search" >搜索</el-button>
          <el-button type="primary" icon="el-icon-search" >搜索</el-button>-->
          <div class="pagebox">
            <el-pagination
              background
              layout="total ,prev, pager, next ,jumper"
              @current-change="handleCurrentChange"
              :page-size="pageSize"
              :total="total"
              :current-page="currentPage"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </vue-scroll>
</template>
<script>
import ArticleItem from "./ArticleItem"
import { GetSinglePage } from "../../api/index"
export default {
  name: "home",
  data() {
    return {
      loading: true,
      value: 1,
      ops: {
        //vuescroll的配置
        vuescroll: {
          sizeStrategy: "percent",
          detectResize: true,
        },
        scrollPanel: {
          scrollingX: false,
          initialScrollY: 0,
        },
        rail: {},
        bar: {
          showDelay: 500,
          onlyShowBarOnScroll: false,
          keepShow: true,
          background: "#b3c0d1",
          opacity: 1,
          hoverStyle: false,
          specifyBorderRadius: false,
          minSize: false,
          size: "6px",
          disable: false,
        },
      },
      total: null, //文章总数
      pageSize: 6, //每页的数据量
      currentPage: 1, //当前页码数
      data: [], //文章数据
      distance: 0, //接收Article页面传递过来的vuescroll滚动的距离
      page: 0, //接收Article页面传递过来的页码
    }
  },
  created() {
    let sort = window.localStorage.getItem("sort")
    if (sort) {
      this.value = sort
    }
    if (this.$route.query.page) {
      const { page, distance } = this.$route.query
      this.currentPage = +page
      this.distance = +distance
    }
    this.getData(this.currentPage)
    // vuescroll的设定滚动的初始值
    this.ops.scrollPanel.initialScrollY = this.distance
  },
  beforeDestroy() {},
  components: {
    ArticleItem,
  },
  mounted() {
    this.$EventBus.$on("sort", (value) => {
      this.value = value
      this.currentPage = 1
      this.getData(this.currentPage)
    })
  },
  methods: {
    // 页码改变时
    handleCurrentChange(val) {
      this.currentPage = val
      this.distance = 0
      this.getData(this.currentPage)
      // 翻页时重置vuescroll
      this.$refs["vs"].scrollTo({
        y: "0%",
      })
    },
    async getData(page) {
      const { count, data } = await GetSinglePage({
        page,
        limit: this.pageSize,
        sort: this.value,
      })
      this.data = []
      this.total = count
      this.data = data
      this.loading = false
    },
    handlerarticle(id) {
      // 获取vuescroll滚动的距离
      const { scrollTop, scrollLeft } = this.$refs["vs"].getPosition()
      this.$router.push({
        name: "article",
        query: { id, distance: scrollTop, page: this.currentPage },
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.box {
  width: 990px;
  height: 100%;
  margin: 0px 50px;
  text-align: center;
}
.box:after {
  content: "";
  width: 300px;
  border: 1px solid transparent;
}
.articleitem {
  margin-top: 20px;
  transition: 1s;
}
.articleitem:hover {
  cursor: pointer;
  box-shadow: 0 10px 8px rgba(10, 16, 20, 0.24), 0 0 8px rgba(10, 16, 20, 0.12);
}
.page {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 20px 0px;
  .pagebox {
    width: auto;
    padding: 10px 20px;
    background: white;
    max-width: 950px !important;
    display: flex;
    justify-content: center;
    box-shadow: 0 0px 8px rgba(10, 16, 20, 0.24), 0 0 8px rgba(10, 16, 20, 0.12);
    border-radius: 5px;
  }
}
</style>
